<template>
  <view
    class="footer-nav"
    :style="[outModuleCss]"
    v-if="propsData.show_type == 'nav' && propsData.is_show && navList.length"
  >
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view
      class="nav-item"
      v-for="(nav, i) in navList"
      :key="i"
      @click="onClickItem(nav)"
    >
      <view class="nav-img">
        <image
          lazy-load
          :src="choosed(nav) ? nav.active_url : nav.pic_url"
          alt=""
        />
        <view class="cart-num" v-if="nav.link.name === '购物车' && cartNum">
          {{ cartNum < 100 ? cartNum : "99+" }}
        </view>
      </view>
      <p
        :style="{
          color: choosed(nav)
            ? propsData.params.activeColor
            : propsData.params.defaultColor,
        }"
      >
        {{ nav.nav_text }}
      </p>
    </view>
  </view>
</template>

<script>
import { tabBarData } from "@/common/jsonData.js";
export default {
  props: {
    controlList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    hideTabBar: {
      type: Boolean,
      default: true,
    },
  },
  created() {},
  computed: {
    cartNum() {
      return this.$store.getters.cartNum;
    },
    propsData() {
      if (this.shenheStatus == 1) {
        let [item] = tabBarData.filter((d) => {
          return d.show_type == "nav";
        });
        return item || {};
      }

      let [item] = this.controlList.filter((d) => {
        return d.show_type == "nav";
      });
      return item || {};
    },
    navList() {
      if (this.shenheStatus == 1) {
        let [data] = tabBarData.filter((d) => {
          return d.show_type == "nav";
        });
        return data.params.navList || [];
      }

      let [data] = this.controlList.filter((d) => {
        return d.show_type == "nav";
      });
      return data.params.navList || [];
    },
    choosed() {
      return (item) => {
        if (item.link && item.link.link) {
          let index = item.link.link.indexOf(this.currentPage);
          if (index > -1) {
            return this.$utils.diyPageFoot(this.currentPage, item.link.link);
          } else {
            return false;
          }
        } else {
          return false;
        }
      };
    },
    outModuleCss() {
      if (!this.propsData) return {};
      let style = Object.assign({}, this.propsData.moduleCss);
      if (style.margin) style.margin = `0 0 ${style.margin * 2}rpx 0`;
      if (style.padding) style.padding = `0 ${style.padding * 2}rpx`;
      if (style.borderRadius)
        style["borderRadius"] = `${style.borderRadius * 2}rpx`;
      let obj = {
        borderRadius: style.borderRadius,
        overflow: "hidden",
      };
      return obj;
    },
    moduleBgCss() {
      if (!this.propsData) return {};
      let style = Object.assign({}, this.propsData.moduleCss);
      if (!style.useBackground) {
        return {
          background: "inherit",
        };
      }
      let hSpace = style.padding;
      let obj = {
        backgroundColor: style.backgroundColor || "",
        backgroundImage: style.backgroundImage || "",
        backgroundRepeat: style.backgroundRepeat || "no-repeat",
        backgroundSize: style.backgroundSize || "100% 100%",
        opacity: style.opacity || "",
        borderRadius: style.borderRadius * 2 + "rpx" || "",
        width: `calc(100% - ${hSpace * 4}rpx)`,
        left: hSpace * 2 + "rpx",
      };
      return obj;
    },
  },

  methods: {
    onClickItem(nav) {
      if (nav.link.link != this.page) {
        this.$utils.toUrl(nav.link.link, nav.link.open_type);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.footer-nav {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 511;
  box-shadow: 0px -1px 6rpx #eeeeee;
  height: calc(100rpx);
  height: calc(100rpx + constant(safe-area-inset-bottom));
  height: calc(100rpx + env(safe-area-inset-bottom));
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  // background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    .nav-img {
      width: 40rpx;
      height: 40rpx;
      position: relative;
      .cart-num {
        position: absolute;
        right: 0;
        top: 6rpx;
        transform: translate(50%, -50%);
        background-color: red;
        border-radius: 50%;
        width: 34rpx;
        line-height: 34rpx;
        color: #fff;
        font-size: 18rpx;
        text-align: center;
      }
    }
    image {
      width: 100%;
      height: 100%;
    }
    p {
      margin-top: 4rpx;
      font-size: 24rpx;
      color: #2e2d2d;
      margin-bottom: 0;
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
